Highlighting a Link When It’s Both Focused and Hovered in CSS
You can style a link only when it is both focused and hovered using a combined CSS pseudo-class selector. This allows you to apply specific styles only when both interaction states are active simultaneously.
Chain pseudo-classes like
:hoverand:focustogether to target elements in both states.This combination improves accessibility and user experience when navigating with both mouse and keyboard.
The order of pseudo-classes in the selector does not matter;
a:focus:hoveranda:hover:focusare equivalent.
In this example, the link changes color when hovered, shows an outline when focused, and highlights with a background color only when both conditions are met. This ensures clear visual feedback for users using both mouse and keyboard navigation.
Use
:focusfor keyboard accessibility and:hoverfor mouse interaction.Combine them carefully to enhance interactivity without overwhelming the design.
Always maintain visible focus indicators for accessibility compliance.
Test with both mouse and keyboard to ensure consistent behavior.